<template>
  <div class="leaderboard">
    <div class="page-header">
      <a-button type="text" @click="goBack">
        <icon-arrow-left />返回
      </a-button>
      <h1>点赞排行榜</h1>
    </div>

    <a-spin :loading="loading">
      <div class="leaderboard-content">
        <div class="top-users">
          <div v-for="(user, index) in topThreeUsers" :key="user.userId" class="top-user-card" :class="`rank-${index + 1}`">
            <div class="rank-badge">{{ index + 1 }}</div>
            <a-avatar :size="index === 0 ? 100 : 80" class="user-avatar">{{ user.userName.charAt(0) }}</a-avatar>
            <div class="user-info">
              <div class="user-name">{{ user.userName }}</div>
              <div class="like-count">
                <icon-thumb-up />
                <span>{{ user.likeCount }} 点赞</span>
              </div>
            </div>
          </div>
        </div>

        <a-card class="other-users-card">
          <template #title>
            <div class="card-title">其他排名</div>
          </template>
          <a-list :data="otherUsers" class="user-list">
            <template #item="{ item, index }">
              <a-list-item class="user-list-item">
                <div class="user-rank">{{ index + 4 }}</div>
                <a-avatar :size="50" class="user-avatar">{{ item.userName.charAt(0) }}</a-avatar>
                <div class="user-info">
                  <div class="user-name">{{ item.userName }}</div>
                  <div class="user-stats">
                    <span class="like-count">
                      <icon-thumb-up />
                      {{ item.likeCount }} 点赞
                    </span>
                    <span class="answer-count">
                      <icon-message />
                      {{ item.answerCount }} 回答
                    </span>
                  </div>
                </div>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { leaderboardApi } from '@/api/question';

const router = useRouter();
const loading = ref(true);
const users = ref([]);

// 获取排行榜数据
const fetchLeaderboard = async () => {
  loading.value = true;
  try {
    const res = await leaderboardApi.getLeaderboard();
    users.value = res.data || [];
    loading.value = false;
  } catch (error) {
    console.error('获取排行榜数据失败', error);
    Message.error('获取排行榜数据失败，请重试');
    
    // 使用模拟数据作为备用
    users.value = [
      {
        userId: '1',
        userName: '前端大师',
        likeCount: 256,
        answerCount: 48
      },
      {
        userId: '2',
        userName: '技术专家',
        likeCount: 189,
        answerCount: 35
      },
      {
        userId: '3',
        userName: '学习达人',
        likeCount: 145,
        answerCount: 27
      },
      {
        userId: '4',
        userName: '编程爱好者',
        likeCount: 98,
        answerCount: 19
      },
      {
        userId: '5',
        userName: '代码艺术家',
        likeCount: 87,
        answerCount: 15
      },
      {
        userId: '6',
        userName: '问题解决者',
        likeCount: 76,
        answerCount: 22
      },
      {
        userId: '7',
        userName: '知识分享者',
        likeCount: 65,
        answerCount: 18
      }
    ];
    
    loading.value = false;
  }
};

// 前三名用户
const topThreeUsers = computed(() => {
  return users.value.slice(0, 3);
});

// 其他用户
const otherUsers = computed(() => {
  return users.value.slice(3);
});

// 返回上一页
const goBack = () => {
  router.push('/communication');
};

onMounted(() => {
  fetchLeaderboard();
});
</script>

<style scoped>
.leaderboard {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 0 10px;
  font-size: 24px;
  color: #333;
}

.leaderboard-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.top-users {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  padding: 20px 0;
}

.top-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.top-user-card:hover {
  transform: translateY(-5px);
}

.rank-1 {
  order: 2;
  padding: 30px;
  background: linear-gradient(135deg, #ffd700 0%, #ffcc00 100%);
  z-index: 3;
}

.rank-2 {
  order: 1;
  background: linear-gradient(135deg, #c0c0c0 0%, #e0e0e0 100%);
  z-index: 2;
}

.rank-3 {
  order: 3;
  background: linear-gradient(135deg, #cd7f32 0%, #dda15e 100%);
  z-index: 1;
}

.rank-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.rank-1 .rank-badge {
  background-color: #ffc107;
  color: #333;
}

.rank-2 .rank-badge {
  background-color: #9e9e9e;
}

.rank-3 .rank-badge {
  background-color: #cd7f32;
}

.user-avatar {
  margin-bottom: 12px;
}

.user-info {
  text-align: center;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.like-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ff4d4f;
  font-weight: 500;
}

.other-users-card {
  width: 100%;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.user-list-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
}

.user-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  margin-right: 16px;
}

.user-info {
  flex: 1;
  margin-left: 16px;
}

.user-stats {
  display: flex;
  gap: 16px;
  color: #999;
  font-size: 14px;
  margin-top: 4px;
}

.answer-count {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>